<template>
  <div>
    <select v-model="num">
      <option :value="1">1</option>
      <option :value="2">2</option>
      <option :value="3">3</option>
    </select>
    <button @click="increment">增加</button>
    <button @click="decrement">减少</button>
    <button @click="incrementAsync">异步增加</button>
  </div>
</template>

<script>
export default {
  name: 'CountUpdate',

  data () {
    return {
      num: 3
    }
  },

  methods: {
    increment () {
      // 触发increment的mutation
      this.$store.commit('counter/increment', this.num)
      // counterStore.increment(this.num)
    },

    decrement () {
      // 触发decrement的mutation
      this.$store.commit('counter/decrement', this.num)
    },

    incrementAsync () {
      // 触发incrementAsync的action
      this.$store.dispatch('counter/incrementAsync', this.num)
    },
  }
}
</script>

<style scoped>

</style>
